<template>
  <div class="main">
    <div class="data-left">
      <dataPanel title="安保人员管理"  :height="27" icon="/static/img/park/security/1.webp">
        <div class="security_person_manage">
          <div style="width: 50%;height: 100%;">
            <chart-view class="chart-content" :chart-option="securityPersonManage" :auto-resize="true" height="100%" />
          </div>
          <ul class="security_person_data" >
            <li>
              <b>在岗率</b>
              <span class="text_color_in">35%</span>
            </li>
            <li>
              <i class="icon_separate"></i>
            </li>
            <li>
              <b>离岗率</b>
              <span class="text_color_out">65%</span>
            </li>
          </ul>
        </div>

      </dataPanel>
      <dataPanel title="巡更情况"  :height="34" icon="/static/img/park/security/2.webp">
        <ElTable :table_data="securitySituationData" :is_stripe="true"></ElTable>
      </dataPanel>
      <dataPanel title="重点摄像头"  :height="34" icon="/static/img/park/security/3.webp">
        <ul class="video">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </dataPanel>
    </div>
    <div class="data-right">
      <dataPanel title="安防告警统计"  :height="49" icon="/static/img/park/security/4.webp">
        <warStatic></warStatic>
      </dataPanel>
      <dataPanel title="安防告警列表"  :height="48" icon="/static/img/park/security/5.webp">
        <div class="security_list">
          <div style="width: 100%;height: 40%;">
            <ElTableH :table_data="securityListData" :is_stripe="true"></ElTableH>
          </div>
          <div class="area-title">
                <div class="line_left"></div>
                <p>告警区域</p>
                <div class="line_right"></div>
            </div>
          <div class="war_area">
            <carousel :date="carouselImgData"></carousel>
          </div>
        </div>
      </dataPanel>
    </div>
  </div>
</template>

<script>
import  dataPanel from "../../../components/park/dataPanel.vue"   // 数据框
import  ElTable from "../../../components/park/table01.vue"   // table表单
import  ElTableH from "../../../components/park/tableHeightLight.vue"   // 含有高亮字体的table表单
import  carousel from "../../../components/park/carousel.vue"   // 含有高亮字体的table表单
import { securitySituation, securityList, carouselImg } from './assets/js/tableData'  //表单数据
import warStatic from './components/warStatic/index.vue'
export default {
  data() {
    return {
      securityPersonManage:{},
      securitySituationData:{},
      securityListData:{}
    }
  },
  methods:{
  },
  created(){
    this.securityPersonManage = this.$eChartFn.data23(),
    this.securitySituationData = securitySituation,
    this.securityListData = securityList,
    this.carouselImgData = carouselImg
  },
  components:{
    dataPanel,
    ElTable,
    ElTableH,
    warStatic,
    carousel
  }
}
</script>

<style scoped lang="less">
@import '../../assets/css/chuShiHua.less';
@import './assets/css/security.less';

//布局
.main{
  .WH();
  display: flex;
  justify-content: space-between;
  .data-left, .data-right{
    .WH(24%,95%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.icon_separate{
  display: flex;
  width: 9vw;
  height: 1vh;
  background: url('/static/img/park/security/line.webp') 50% 0% no-repeat ;
  background-size: 100%;
}
</style>
